<template>
  <div class="warn-current pager-container">
    <!--查询条件-->
    <div class="pager-container-inner">
      <!--顶部操作-->
      <div class="btn-wrap"></div>
      <!--表单查询项-->
      <bs-form form-type="query" :model="queryForm" :label-width="90">
        <bs-form-item label="实力">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="规则名">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="级别">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="通知群组">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="是否启用">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item class="form-item-btns">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
          <el-button type="primary">批量删除</el-button>
        </bs-form-item>
      </bs-form>
      <!--表格-->
      <div class="table-content">
        <bs-table ref="tableRef" :get-data="getList" :columns="columns" :data="tableData"></bs-table>
      </div>
    </div>
  </div>
  <EditRule ref="editRef"/>
</template>
<script setup lang="ts">
import {reactive, ref, h} from 'vue'
import BsTable from '@/components/table/BsTable.vue'
import EditRule from './components/warn-rule/EditRule1.vue'

const editRef = ref()
const tableRef = ref()
const tableData = ref<any[]>([{}])
const queryForm = reactive<Record<string, any>>({
})

const columns:ColumnItem[] = [
  {
    type: 'selection',
    prop: 'selection',
    fixed: 'left',
    width: 30
  },
  {
    type: 'expand',
    prop: 'expand',
    fixed: 'left',
    width: 20,
    renderExpand: (row) => {
      return h('div', {info: row})
    }
  },
  {
    label: '匹配计数',
    prop: 'name',
    fixed: 'left',
    width: 80
  },
  {
    label: '启用',
    prop: 'name',
    fixed: 'left',
    width: 80
  },
  {
    label: '级别',
    prop: 'name',
    fixed: 'left',
    width: 80
  },
  {
    label: '规则名',
    prop: 'name',
    fixed: 'left',
    width: 180
  },
  {
    label: '通知群组',
    prop: 'name',
    fixed: 'left',
    minWidth: 120
  },
  {
    label: '通知媒介',
    prop: 'name',
    fixed: 'left',
    width: 100
  },
  {
    label: '操作',
    prop: '',
    fixed: 'right',
    width: 200,
    bodyOptions: {
      type: 'button',
      bind (row, _index) {
        return {
          buttons: [{
            text: '编辑',
            onClick: () => {
              editRef.value.open(row)
            }
          }, {
            text: '清除计数器',
            onClick: () => {
            }
          }, {
            text: '删除',
            onClick: () => {
            }
          }]
        }
      }
    }
  }
]

const getList = async () => {
  return {
    total: 1
  }
}

</script>
<style lang="scss" scoped>
@import "./scss/list.scss";
.form-item-btns {
  grid-column-start: 3 !important;
  grid-column-end: 5 !important;
}
</style>
